import React, {useState,} from 'react'
import {connect,} from 'react-redux'
import {WingBlank, Icon, WhiteSpace,} from "antd-mobile"


const GameIntelligence = props => {

    const {
        currentGame,
    } = props

    const {
        home_team,
        away_team,
        intelligence,
    } = currentGame

    const [homeGood, setHomeGood,] = useState(true)
    const [homeBad, setHomeBad,] = useState(false)
    const [awayGood, setAwayGood,] = useState(true)
    const [awayBad, setAwayBad,] = useState(false)
    const [neutrals, setNeutrals,] = useState(false)

    const intMenu = (dataArr, type, active, action) => {

        const m = {
            'good': '有利情报',
            'bad': '不利情报',
            'neutral': '中立情报',
        }

        const indexToChinese = {
            0: '一',
            1: '二',
            2: '三',
            3: '四',
            4: '五',
            5: '六',
            6: '七',
            7: '八',
            8: '九',
            9: '十',
        }

        const title = m[type]
        const titleBg = active ? 'rgba(255,79,114,0.1)' : 'rgba(51,51,51,0.1)'
        const normalIcon = <Icon type='right' color='#333' size='xs'/>
        const activeIcon = <Icon type='down' color='#FF4F72' size='xs'/>
        const menuTitle = (
            <div
                className='flex-space-between-align-center'
                style={{
                    height: '40px',
                    padding: '8px',
                    backgroundColor: titleBg,
                }}
                onClick={() => action(!active)}
            >
                <span style={{color: active ? '#FF4F72' : 'rgba(51,51,51,1)', fontSize: '16px',}}>{title}</span>
                {active ? activeIcon : normalIcon}
                {/*<Icon type='down' color='#FA7268' size='xs'/>*/}
            </div>
        )

        const menuContents = (
            <div
                style={{
                    backgroundColor: '#fff',
                    padding: '8px',
                    lineHeight: '20px',
                }}
            >
                {dataArr.length === 0 ? '暂无情报' : dataArr.map((data, index) => {
                    return <div key={index} style={{padding: '8px 0',}}>
                        <p>{`情报${indexToChinese[index]}:`}</p>
                        <p>{data[1]}</p>
                    </div>
                })}
            </div>
        )

        return <>
            {menuTitle}
            {active ? menuContents : null}
        </>

    }

    const teamInt = (data, type, team) => {

        const m = {
            home: {
                color: '#213A4B',
                index: 0,
                activeGood: homeGood,
                activeBad: homeBad,
                setGoodAction: setHomeGood,
                setBadAction: setHomeBad,
            },
            away: {
                color: '#FFA500',
                index: 1,
                activeGood: awayGood,
                activeBad: awayBad,
                setGoodAction: setAwayGood,
                setBadAction: setAwayBad,
            },
        }


        const color = m[type].color
        const dot = color => <div
            style={{
                backgroundColor: `${color}`,
                height: '10px',
                width: '10px',
                borderRadius: '48%',
                marginRight: '8px',
                marginLeft: '8px',
            }}
        />
        const {
            name_zh,
        } = team

        const {
            good,
            bad,
        } = data.info
        const goodArr = good[type]
        const badArr = bad[type]

        return <div
            style={{
                width: '49%',
            }}

        >
            <WhiteSpace/>
            <div
                className='flex flex-align-center'
            >
                {dot(color)}
                {name_zh}
            </div>
            <WhiteSpace/>
            {intMenu(goodArr, 'good', m[type].activeGood, m[type].setGoodAction)}
            <WhiteSpace/>
            {intMenu(badArr, 'bad', m[type].activeBad, m[type].setBadAction)}
        </div>
    }

    return <WingBlank>
        <div className='flex flex-space-between'>
            {teamInt(intelligence, 'home', home_team)}
            {teamInt(intelligence, 'away', away_team)}
        </div>
        <WhiteSpace/>
        {intMenu(intelligence.info.neutral, 'neutral', neutrals, setNeutrals)}
    </WingBlank>
}

const mapState = state => ({
    currentGame: state.game.currentGame,
})

export default connect(mapState,)(GameIntelligence)
